<template>
    <div id="AddGoods">
        <!-- 面包屑 -->
        <my-breadcrumb/>
        <el-row class="main">
             <!-- 信息提醒 -->
           <el-col :span="24">
               <el-alert
                   title="添加商品信息"
                   type="info"
                   center
                   show-icon>
               </el-alert>
           </el-col>
            <!-- 步骤条 -->
            <el-col :span="24" class="add-goods-steps">
                <el-steps :active="$store.state.goods.cuurent_steps_active" align-center >
                    <el-step title="基本信息" ></el-step>
                    <el-step title="商品参数" ></el-step>
                    <el-step title="商品属性" ></el-step>
                    <el-step title="商品图片" ></el-step>
                    <el-step title="商品内容" ></el-step>
                    <el-step title="完成" ></el-step>
                </el-steps>
           </el-col>
           <!-- tabs标签 -->
           <el-col :span="24">
                <el-tabs :tab-position="tabPosition" :before-leave='handlBeforeLeave'>
                    <el-tab-pane label="基本信息" >
                        <basic-info/>
                    </el-tab-pane>
                    <el-tab-pane label="商品参数">
                       <goods-params/> 
                    </el-tab-pane>
                    <el-tab-pane label="商品属性">
                        <goods-attrs/>
                    </el-tab-pane>
                    <el-tab-pane label="商品图片">
                        <picture-upload/>
                    </el-tab-pane>
                    <el-tab-pane label="商品内容">
                        <goods-content/>
                    </el-tab-pane>
                </el-tabs>
           </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
     name:'AddGoods',
     data() {
        return {
             /* 控制tabs标签方向 */
             tabPosition: 'left'
        }
    },
    methods:{
        handlBeforeLeave(activeName,oldActiveName){
            //console.log('activeName',activeName);
            this.$store.commit('goods/CHANGE_STEPS_ACTIVE',Number(activeName))
            if(activeName==='1'){
                let data={sel:'many',id:6}
                this.$store.dispatch('categorie/Acs_getCategoriesAttributes',data)
                .then(res=>{
                        this.$store.commit('goods/CHANGE_GOODS_PARAMS',res)
                    }
                ).catch(err=>console.log(err))
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    #AddGoods{
        .main{
            margin-top: 15px;
            background: #fff;
            padding: 20px;
            ::v-deep .el-step__head.is-finish {
                    color: #67C23A;
                    border-color: #67C23A;
                    
                }
            ::v-deep .el-step__title.is-finish {
                    color: #67C23A;
                    font-size: 12px;
                }
            ::v-deep .el-step__title.is-process {
                     font-size: 12px;
                }
            ::v-deep .el-step__title{
                    font-size: 12px;
                }
            .add-goods-steps{
                margin: 10px 0;
            }
        }
    }
</style>